<template>
	<view class="warp" :style="mix_diyStyle">
		
		<view class="tab">
			<view @click="changetab(0)" :class="tabnum==0?'active':'activeout'">
				我的任务
			</view>
			<view  @click="changetab(1)" :class="tabnum==1?'active':'activeout'">
				我的发布
			</view>
		</view>
		<view class="mytask" v-if="tabnum==0">
			<view class="" v-if="type==0">
				<view class="card" v-for="(item,index) in tasklist" :key="index"  >
					<view class="card_box">
						<view class="card_top">
							<view class="image">
								<image style="width: 149rpx;height: 133rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/farword/two.png"></u-image>
							</view>
							<view class="right_c">
								<view class="c_left">
									<view class="title">
										{{item.taskName}}
									</view>
									<view class="index">
										暂无排名
									</view>
									<view class="time">
										<span v-if="item.taskModel==0">
											 {{item.startTime}}___{{item.endTime}}
										 </span>
										<span v-if="item.taskModel==1">每日</span>
										<span v-if="item.taskModel==2">每周</span>
										<span v-if="item.taskModel==3">每月</span>
									</view>
								</view>
								<view class="c_right">
										<u-circle-progress border-width="10" width="113" inactive-color="#fff" bg-color="rgba(0,0,0,0)" active-color="#ff0000" :percent="item.allpersent*1">
											<view class="u-progress-content">
												<text class='u-progress-info'>{{item.allpersent}}%</text>
											</view>
										</u-circle-progress>
								</view>
							</view>
						</view>
						<view class="card_bottom">
							<view class="poush_good" v-for="(val,idx) in item.indexInfoList" :key="idx">
								<view class="left">
									<view class="title">
										{{val.indexTitle}}
									</view>
									<view class="steps">
										<!-- <u-line-progress height="12"  active-color="#ff0000" :percent="((val.completedIndexNum/val.indexNum)*100).toFixed(1)"></u-line-progress> -->
									<progress activeColor="#fe9a22" :percent="((val.completedIndexNum/val.indexNum)*100).toFixed(1)" show-info stroke-width="3" />
									</view>
									<view class="tetx">
										完成目标进度 {{val.completedIndexNum}}/{{val.indexNum}}
									</view>
								</view>
								<view class="right">
									<view class="btn" @click="addcomplatetask(val,item)">
										去完成
									</view>
								</view>
							</view>
							<!-- <view class="push_all">
								<view class="left">
									<view class="title">
										推广总次数
										</view>
									<view class="steps">
										<u-line-progress height="12" active-color="#ff0000" :percent="100"></u-line-progress>
									</view>
									<view class="tetx">
										完成目标进度 6/3
									</view>
								</view>
								<view class="right">
									<view  class="btnok">
										已完成
									</view>
								</view>
							</view> -->
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view class="mytasked" v-if="tabnum==1">
			
			 
			<!-- <view class="flex2 tab">
			 	<view @click="currentfn(index)" :class="currentIndex == index ? 'selected':''" v-for="(item,index) in list " :key="index">{{item.value}}({{item.number}})</view>
			 </view> -->
			 <!-- 营销 -->
			 <view class="" v-if="type==0">
			 <view  class="task_list" @click="toinfo(item)" v-for="(item,index) in tasklisted" :key="item.id">
			 	<view class="flex2">
			 		<view>
			 			<text class="task_title">{{item.taskName}}</text>
			 			<text class="task_label" v-if="item.taskModel==0">阶段任务</text>
			 			<text class="task_label" v-if="item.taskModel==1">每日任务</text>
			 			<text class="task_label" v-if="item.taskModel==2">每周任务</text>
			 			<text class="task_label" v-if="item.taskModel==3">每月任务</text>
			 		</view>
			 		<uni-icons type="forward" size="20"></uni-icons>
			 	</view>
			 	<view class="task_time">
			 		<uni-countdown :show-colon="false" color="#ee212d"   :day="item.timeout.day" :hour="item.timeout.hour" :minute="item.timeout.min" :second="item.timeout.secord"></uni-countdown>
			 	</view>
			 	<view class="flex task_Num">
			 		<view class="task_num">已完成人数：<text class="task_numColor">{{item.completedNum}}</text></view>
			 		<!-- <view class="task_num">已完成商户：<text class="task_numColor">20</text></view> -->
			 		<view class="task_num">未完成人数：<text class="task_numColor">{{item.executorList.length-item.completedNum}}</text></view>
			 		<!-- <view class="task_num">未完成商户：<text class="task_numColor">20</text></view> -->
			 		
			 	</view>
			 </view>	
			 </view>
			
			 
			 
			 <view class="task_add" @click="toaddtask" v-if="isshop">
			 	发布任务
			 </view>
			 <!-- 提示 -->
			 <!-- <u-toast ref="uToast"></u-toast> -->
		</view>
		
		<view style="text-align: center;" class="" v-if="tasklist.length==0 || tasklisted.length==0">
			<image  src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/clear.png" mode="widthFix"></image>
		     <view class="" style="color: #a3a3a3;">
		     	暂无数据
		     </view>
		</view>
		<view class="" style="padding-bottom: 50%;">
			
		</view>
	</view>
</template>

<script>
	import {
			mapState,
			mapMutations
		} from 'vuex'
		import uniCountdown from "@/standard/uni-countdown/components/uni-countdown/uni-countdown.vue"
	export default {
		components:{
			uniCountdown
		},
		data() {
			return {
			tabnum:0,//任务切换
			type:0,
			tasklist:[],
			queryform:{
				pageSize:20,
				current:1,
				storeId:''
			},
			qtotal:0,
			listform:{
			userId:'',
			current: 1,
			pageSize: 10,	
			},
			ltotal:0,
			currentIndex:0,
			list:[{value:'进行中',number:3},{value:'未开始',number:3},{value:'已结束',number:3},],
			tasklisted:[],
			timeout:{},
			weekmouth:{},
			addform:{},//完成指标
			isshop:false
			};
		},
			// 下拉
				onPullDownRefresh() {
					// 刷新位置
					if(this.tabnum==0){
						this.gettasklist()
					}else{
				if(this.isshop){
					this.gettasked()
				}else{
					uni.showToast({
						title:'升级商户后可操作性',
						icon:'none'
					})
				}	
					}
					var that=this
					setTimeout(function(){
							uni.stopPullDownRefresh()
						},1000)
				},
				onReachBottom(){
					if(this.tabnum==0){
						if(this.listform.current*this.listform.pageSize>=this.ltotal){
							uni.showToast({
								title:'没有了',
								icon:'none'
							})
						}else{
							this.listform.current++
							this.$request({
								url:'v3/task/front/appTask/sale/list',
								method:'GET',
								data:this.listform
							}).then(res=>{
								let arry=[]
								arry= res.data.list
							arry.forEach(item=>{
									item.allnum=0
									item.indexInfoList.forEach(val=>{
										item.allnum+=(val.completedIndexNum/val.indexNum)
									})
									item.allpersent=((item.allnum/item.indexInfoList.length)*100).toFixed(1)
								})
							this.tasklist.push(...arry)
							   
								 
							})
						}
					}else{
						if(this.queryform.current*this.queryform.pageSize>=this.qtotal){
							uni.showToast({
								title:'没有了',
								icon:'none'
							})
						}else{
							this.queryform.current++
							this.$request({
								url:'v3/task/front/appTask/page',
								method:'GET',
								data:this.queryform
							}).then(res=>{
								let arr=[]
								arr=res.data.list
								this.timeout=this.gettime()
								this.weekmouth=this.getweekmouth()
								arr.forEach(item=>{
								if(item.taskModel==0){
										// 阶段性任务
										item.timeout=this.gettimestage(new Date(),item.endTime)
										 console.log(item.timeout,'jieduan');
									}else if(item.taskModel==1){
									     item.timeout=this.getdaystage()
										 console.log(item.timeout);
									}else if(item.taskModel==2){
										 item.timeout=this.getweekstage()
										 console.log(item.timeout);
									 }else if(item.taskModel==3){
										 item.timeout=this.getmouth()
										 console.log(item.timeout);
									 }
								})
								 this.tasklisted.push(...arr)
							})
						}
					}
					
				},
	  onLoad() {
		  setTimeout(()=>{
		    uni.setNavigationBarTitle({
		  			   title: this.$L('我的任务')
		  			});
		  },0);
		// this.getupper()
		this.gettasklist()
		this.getidshop()
		
		},
		computed: {
					...mapState(['hasLogin', 'userInfo', 'userCenterData']),
					},
		methods:{
		// 校验是否是商户
		getidshop(){
			this.$request({
				url:'v3/seller/front/vendor/list',
				method:"GET",
				data:{vendorMobile:this.userCenterData.memberMobile}
			}).then(res=>{
				if(res.data.length!=0){
					this.isshop=true
				}
			})
			
		},
			// 切换
			changetab(val){
				this.tabnum=val
				if(val==0){
					this.gettasklist()
				}else{
					if(this.isshop){
						this.gettasked()
					}else{
						uni.showToast({
							title:'升级商户后可操作',
							icon:'none'
						})
					}
				}
			},
			changetype(val){
				this.type=val
				if(val==0){
					// 刷新
				}else{
					uni.navigateTo({
						url:"/standard/staduytask/staduytask"
					})
				}
			},
			 
		 
			// 获取销售端任务列表
			gettasklist(){
				console.log(this.userCenterData);
				this.listform.userId=this.userCenterData.memberId
				this.$request({
					url:'v3/task/front/appTask/sale/list',
					method:"GET",
					data:this.listform
				}).then(res=>{
					this.tasklist=res.data.list
					this.ltotal=res.data.pagination.total
					this.tasklist.forEach(item=>{
						item.allnum=0
						item.indexInfoList.forEach(val=>{
							item.allnum+=(val.completedIndexNum/val.indexNum)
						})
						
						item.allpersent=((item.allnum/item.indexInfoList.length)*100).toFixed(1)
					})
									 
				})
			},
			// 获取管理端任务
			gettasked(){
				// 获取
				this.queryform.storeId=this.userCenterData.memberId
				this.$request({
					url:'v3/task/front/appTask/page',
					method:'GET',
					data:this.queryform
				}).then(res=>{
					this.tasklisted=res.data.list
					 this.qtotal=res.data.pagination.total
					this.timeout=this.gettime()
					this.weekmouth=this.getweekmouth()
					this.tasklisted.forEach(item=>{
						if(item.taskModel==0){
							// 阶段性任务
							item.timeout=this.gettimestage(new Date(),item.endTime)
							 console.log(item.timeout,'jieduan');
						}else if(item.taskModel==1){
						     item.timeout=this.getdaystage()
							 console.log(item.timeout);
						}else if(item.taskModel==2){
							 item.timeout=this.getweekstage()
							 console.log(item.timeout);
						 }else if(item.taskModel==3){
							 item.timeout=this.getmouth()
							 console.log(item.timeout);
						 }
					})
				})
				
			},
			// 完成任务
			addcomplatetask(val,item){
				console.log(val,item,'2121323344');
				this.addform.taskId=item.id.toString()
				this.addform.indexId=val.id.toString()
				// this.addform.taskIndex=val.indexNum
				this.addform.userId=this.userCenterData.memberId.toString()
				this.addform.currForwardPeopleId=this.userCenterData.memberId.toString()
				this.addform.currForwardPeople=this.userCenterData.memberName
				// this.$u.api.intaior.addcompletetaskapi(this.addform).then(res=>{
				// 	if(res){
				// 		this.gettasklist()
				// 	}
				// })
				// 储存值
				 
				uni.setStorageSync('addform',JSON.stringify(this.addform))
				 // 跳转
				 if(val.indexId=='1'){
					 // 跳转商品
					 uni.navigateTo({
						 url:"/standard/product/list"
					 	// url:"/standard/product/detail?form="+encodeURIComponent(JSON.stringify(this.addform))
					 })
				 }else if(val.indexId=='2'){
					 // 跳转素材
					uni.switchTab({
						 url:"/pages/index/information"
					 	// url:"/pages/index/information?form="+encodeURIComponent(JSON.stringify(this.addform))
					 })
				 }
			},
			// 条件筛选替换
			currentfn(val){
				this.currentIndex=val
			},
			// 任务详情
			toinfo(val){
				uni.navigateTo({
					url:"/extra/taskdetail/taskdetail?id="+val.id
				})
			},
			// 发布任务
			toaddtask(){
				uni.navigateTo({
					url:"/extra/addtask/addtask"
				})
			},
			// 倒计时
			gettime(){
				let nowtime=new Date()
				let dayout=this.newDate(nowtime)+' '+'23:59:59'
			   // 当天剩余时间 24*60*60
			   let daytime=new Date(dayout).getTime()-nowtime.getTime()
			   // d
			  let day= daytime/(24*60*60*1000)<0?0: Math.floor((daytime/(24*60*60*1000)))
			  // h
			  let hour=(daytime-(day*24*60*60*1000))/(60*60*1000)<0?0:Math.floor((daytime-(day*24*60*60*1000))/(60*60*1000))
			  // m
			  let min=(daytime-((day*24+hour)*60*60*1000))/(60*1000)<0?0:Math.floor((daytime-((day*24+hour)*60*60*1000))/(60*1000))
			  // s
			  let scord=(daytime-((day*24*60+hour*60+min)*60*1000))/(1000)<0?0:Math.floor((daytime-((day*24*60+hour*60+min)*60*1000))/(1000))
			 
			  return {day,hour,min,min,scord}
			  
			},
			// 阶段性任务倒计时
			gettimestage(start,end){
				let nowtime=new Date(start)
				let dayout=new Date(end)
				console.log(new Date(dayout).getTime(),nowtime.getTime());
				// 剩余时间
				 let daytime=new Date(dayout).getTime()-nowtime.getTime()
				 console.log(daytime);
				 // d
				let day= daytime/(24*60*60*1000)<0?0: Math.floor((daytime/(24*60*60*1000)))
				// h
				let hour=(daytime-(day*24*60*60*1000))/(60*60*1000)<0?0:Math.floor((daytime-(day*24*60*60*1000))/(60*60*1000))
				// m
				let min=(daytime-((day*24+hour)*60*60*1000))/(60*1000)<0?0:Math.floor((daytime-((day*24+hour)*60*60*1000))/(60*1000))
				// s
				let scord=(daytime-((day*24*60+hour*60+min)*60*1000))/(1000)<0?0:Math.floor((daytime-((day*24*60+hour*60+min)*60*1000))/(1000))
							 
				return {day,hour,min,min,scord}
			},
			
			getdaystage(){
				let nowtime=new Date()
				let dayout=this.newDate(nowtime)+ ' '+'23:59:59'
				// 剩余时间
				 let daytime=new Date(dayout).getTime()-nowtime.getTime()
				 // d
				let day= daytime/(24*60*60*1000)<0?0: Math.floor((daytime/(24*60*60*1000)))
				// h
				let hour=(daytime-(day*24*60*60*1000))/(60*60*1000)<0?0:Math.floor((daytime-(day*24*60*60*1000))/(60*60*1000))
				// m
				let min=(daytime-((day*24+hour)*60*60*1000))/(60*1000)<0?0:Math.floor((daytime-((day*24+hour)*60*60*1000))/(60*1000))
				// s
				let scord=(daytime-((day*24*60+hour*60+min)*60*1000))/(1000)<0?0:Math.floor((daytime-((day*24*60+hour*60+min)*60*1000))/(1000))
							 
				return {day,hour,min,min,scord}
			},
			// 每周任务
			getweekstage(){
				
				let nowtime=new Date()
				let dayout=this.newDate(this.weekmouth.lastDayOfWeek)+ ' '+'23:59:59'
				// 剩余时间
				 let daytime=new Date(dayout).getTime()-nowtime.getTime()
				 console.log(daytime,dayout,this.weekmouth.lastDayOfWeek,'21');
				 // d
				let day= daytime/(24*60*60*1000)<0?0: Math.floor((daytime/(24*60*60*1000)))
				// h
				let hour=(daytime-(day*24*60*60*1000))/(60*60*1000)<0?0:Math.floor((daytime-(day*24*60*60*1000))/(60*60*1000))
				// m
				let min=(daytime-((day*24+hour)*60*60*1000))/(60*1000)<0?0:Math.floor((daytime-((day*24+hour)*60*60*1000))/(60*1000))
				// s
				let scord=(daytime-((day*24*60+hour*60+min)*60*1000))/(1000)<0?0:Math.floor((daytime-((day*24*60+hour*60+min)*60*1000))/(1000))
							 
				return {day,hour,min,min,scord}
			},
			// 每月任务倒计时
			getmouth(){
				let nowtime=new Date()
				let dayout=this.newDate(this.weekmouth.lastDay)+ ' '+'23:59:59'
				// 剩余时间
				 let daytime=new Date(dayout).getTime()-nowtime.getTime()
				 // d
				let day= daytime/(24*60*60*1000)<0?0: Math.floor((daytime/(24*60*60*1000)))
				// h
				let hour=(daytime-(day*24*60*60*1000))/(60*60*1000)<0?0:Math.floor((daytime-(day*24*60*60*1000))/(60*60*1000))
				// m
				let min=(daytime-((day*24+hour)*60*60*1000))/(60*1000)<0?0:Math.floor((daytime-((day*24+hour)*60*60*1000))/(60*1000))
				// s
				let scord=(daytime-((day*24*60+hour*60+min)*60*1000))/(1000)<0?0:Math.floor((daytime-((day*24*60+hour*60+min)*60*1000))/(1000))
							 
				return {day,hour,min,min,scord}
			},
			// 获取周月第一天和最后一天
			getweekmouth(){
				// 获取当月的第一天
				const date = new Date();
				const year = date.getFullYear();
				const month = date.getMonth();
				const firstDay = new Date(year, month, 1);
				// 获取当月的最后一天
				const lastDay = new Date(year, month + 1, 0);
				// 获取本周的第一天
				const day = date.getDay();
				const diff = date.getDate() - day + (day === 0 ? -6 : 1);
				const firstDayOfWeek = new Date(date.setDate(diff));
				// 获取本周的最后一天
				const diff2 = date.getDate()  + 6;
				const lastDayOfWeek = new Date(date.setDate(diff2));
				console.log(firstDay,lastDay,firstDayOfWeek,lastDayOfWeek);
				return {firstDay,lastDay,firstDayOfWeek,lastDayOfWeek}
			},
			// 标准时间转为yy-mm-dd
			newDate(time) {
			    var date = new Date(time)
			    var y = date.getFullYear()
			    var m = date.getMonth() + 1
			    m = m < 10 ? '0' + m : m
			    var d = date.getDate()
			    d = d < 10 ? '0' + d : d
				 
			    return y + '-' + m + '-' + d
			},
		}
	}
</script>

<style lang="scss" >
	page{
		width: 750rpx;
		margin: 0 auto;
		background: #F5F5F5;
	}
.warp{
	height: 100%;
	background-color: $bg-color-split;
	width: 750rpx;
	margin: 0 auto;
	.tab{
		padding: 10rpx 20%;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		border-bottom: 2rpx solid #cecece;
		.active{
			padding-bottom: 10rpx;
			border-bottom: 6rpx solid #fe9a22;
		}
	}
	.mytask{
		background-color: #fff;
		// .client_top{
		// 	width: 100%;
		// 	height: 114rpx;
		// 	background-color: #fff;
		// 	padding: 40rpx 30rpx;
		// 	display: flex;
		// 	justify-content: space-between;
		// 	.cli_left{
		// 		display: flex;align-items: center;
		// 		.marketing{
		// 			font-size: 32rpx;
		// 			font-weight: 700;
		// 			color: #fe9a22;
		// 		}
		// 		.study{
		// 			font-size: 28rpx;
					 
		// 		}
		// 	}
			
		// }
		.card{
			width: 100%;
			margin-top: 0rpx;
			padding: 30rpx;
			.card_box{
				background-image: linear-gradient(to bottom, #fbc6c9, #fef4f4);
				width: 690rpx;
				border-radius: 10rpx;
				// height: 642rpx;
				.card_top{
					width: 690rpx;
					height: 202rpx;
					// background-image: linear-gradient(to bottom, #fbc6c9, #fef4f4);
				    border-radius: 10rpx 10rpx 0 0;
					position: relative;
					.image{
						position: absolute;
						top: -20rpx;
						left: 20rpx;
						width: 149rpx;
						height: 133rpx;
						// background-image: url(../../../static/common/image1.png);
					    // z-index: 9999;
					}
					.right_c{
						position: absolute;
						top: 26rpx;
						right:26rpx;
						display: flex;
						width: 476rpx;
						.c_left{
							.title{
								font:32rpx PingFang-SC-Bold;
								margin-bottom: 20rpx;
							}
							.index{
								width: 312rpx;
								
								font-size: 24rpx;
								
							}
							.time{
								line-height: 32rpx;
								font: 24rpx PingFang-SC-Medium;
								color: #656565;
							}
						}
						.c_right{
							
							.u-progress-content {
									display: flex;
									align-items: center;
									justify-content: center;
								}
								
								.u-progress-dot {
									width: 16rpx;
									height: 16rpx;
									border-radius: 50%;
									background-color: #fb9126;
								}
								
								.u-progress-info {
									font-size: 24rpx;
									padding-left: 10rpx;
									letter-spacing: 2rpx;
									color:#ff0000;
								}
						}
					}
				}
				.card_bottom{
					width: 690rpx;
					// height: 320rpx;
					padding: 15rpx;
					// background-color: #fff;
					border-radius: 0 0 10rpx 10rpx;
				.poush_good{
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 15rpx;
						 .left{
							
							 .title{
								font:28rpx PingFang-SC-Medium; 
							 }
							 .steps{
								 width: 412rpx; 
							 }
							 .tetx{
								font-size: 24rpx;
								color: #656565;
							 }
						 }
						 .right{
							 .btn{
								width: 138rpx;
								 height: 52rpx;
								 border-radius: 26rpx;
								 background-image: linear-gradient(270deg,#ff4d57,#ee212d);
								 text-align: center;
								 line-height: 52rpx;
								 color: #fff; 
							 }
							 .btnok{
								width: 138rpx;
								 height: 52rpx;
								 border-radius: 26rpx;
								 background-color: #fabdc0;
								 text-align: center;
								 line-height: 52rpx;
								 color: #fff; 
							 }
							 
						 }
					}
					
				}
				.more{
					background-color: #fff;
					margin-top: 30rpx;
					width: 100%;
					height: 88rpx;
					text-align: center;
					line-height: 88rpx;
					// font:30rpx PingFang-SC-Medium;
					 border-radius: 10rpx;
					 
				}
			}
		}
	}
	.mytasked{
		
		.flex{
			display: flex;
			align-items: center;
		}
		.flex2{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.flex3{
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.marketing{
			font-size: 36rpx;
			font-weight: 700;
		}
		.study{
			font-size: 26rpx;
		}
		.taskTitle{
			background-color: #fff;
			padding: 40rpx 31rpx;
		}
		.Notice{
			font-family: PingFang-SC-Medium;
			font-size: 24rpx;
			color: rgb(101,101,101);
		}
		
		.tab{
			padding:0 30rpx;
			line-height: 70rpx;
			background-color: #fff;
			margin-top: 10rpx;
		}
			
		
		
		.task_list{
			margin: 20rpx 30rpx;
			background-color: #fff;
			padding: 30rpx;
			border-radius: 15rpx;
		}
		.task_title{
			font-family: PingFang-SC-Medium;
			font-size: 32rpx;
			color: #fe9a22;
			margin-right: 20rpx;
		}
		.task_label{
			font-family:PingFang-SC-Regular ;
			font-size: 24rpx;
			color: #fe9a22;
			border: 2rpx solid #fe9a22;
			padding: 1rpx 8rpx 0rpx 8rpx;
			border-radius: 16rpx;
		}
		.task_time{
			font-size: 24rpx;
			font-family: PingFang-SC-Regular;
			color: rgb(238,33,45);
			margin: 30rpx 0 29rpx 0;
		}
		.task_Num{
			flex-wrap: wrap;
		}
		.task_num{
			width: 50%;
			margin-top: 19rpx;
		}
		.task_numColor{
			color: #fe9a22;
		}
		
		//任务详情
		.taskD_header{
			margin: 20rpx 30rpx 40rpx 30rpx;
			background-color: #fff;
			padding: 30rpx;
			border-radius: 15rpx;
			box-shadow: 0rpx 0rpx 15rpx #ebebeb;
		}
		.taskD_header_l{
			color: rgb(40,40,40);
			font-family: "PingFang-SC-Bold";
			font-size: 30rpx
		}
		.taskD_header_r{
			color: rgb(101,101,101);
			font-size: 24rpx;
			font-family: "PingFang-SC-Regular"
		}
		.taskD_header_b{
			margin-top: 40rpx;
		}
		.taskD_header_time{
			color: rgb(238,33,45);
			font-size: 24rpx;
			margin: 0 10rpx;
		}
		.taskD_header_button{
			width: 140rpx;
			height: 40rpx;
			color: rgb(255,255,255);
			border-radius: 20rpx;
			font-size: 24rpx;
			padding: 10rpx 0;
			background-image: linear-gradient(270deg ,rgb(255,77,87),rgb(238,33,45));
		}
		
		.show{
			font-size: 24rpx;
			color: rgb(101,101,101);
			font-family: "PingFang-SC-Regular";
			padding:0  30rpx;
		}
		
		//任务完成情况
		.taskD_Number{
			padding: 30rpx 30rpx 60rpx 0;
			margin:40rpx 30rpx 30rpx 30rpx;
			background-color: #fff;
			border-radius: 15rpx;
			box-shadow: 0rpx 0rpx 15rpx #ebebeb;
		}
		.taskD_Number_title{
			font-family: "PingFang-SC-Medium";
		}
		.taskD_Number_title_l{
			border-left: 10rpx solid rgb(238,33,45);
			padding-left: 30rpx;
			font-family: "PingFang-SC-Medium";
			font-weight: 700;
		}
		.taskD_Num{
			padding: 59rpx 61rpx 0 61rpx;
		}
		.taskD_Num_d{
			flex: 1;
			text-align: center;
		}
		.taskD_Num_d view:first-child{
			font-family: "PingFang-SC-Regular";
			color: rgb(40,40,40);
			font-size: 26rpx;
		}
		.taskD_Num_d view:last-child{
			font-family: "PingFang-SC-Regular";
			color: rgb(238,33,45);
			font-size: 48rpx;
			margin-top: 29rpx;
		}
		.icon{
			font-size: 24rpx;
		}
			
		.task_add{
			position: fixed;
			bottom: 124rpx;
			right: 30rpx;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			font-size: 26rpx;
			color: #fff;
			padding: 22rpx;
			background-image: linear-gradient(270deg,#fec721,#fe9a22);
		}
		
		// 指标完成情况
		.complete_box{
			padding: 30rpx 30rpx 60rpx 0;
			margin:40rpx 30rpx 30rpx 30rpx;
			background-color: #fff;
			border-radius: 15rpx;
			box-shadow: 0rpx 0rpx 15rpx #ebebeb;
			
		
		}
		.active{
				border: 2rpx solid #f8c94e;
				
			}
		.complete_iamge{
			margin:40rpx 30rpx 30rpx 30rpx;
			
			background-color: #f6f6f6;
			padding:10rpx
		}
		.complete_iamge_l{
			width: 376rpx;
			height: 220rpx;
			background-color: #f6f6f6;
		}
		.complete_iamge_l_num{
			width: 140rpx;
			height: 140rpx;
			 
		}
		.complete_iamge_l_right{
			
		}
		.complete_iamge_r{
			width: 194rpx;
			height: 200rpx;
			background-color: #f0f0f0;
		}
		.complete{
			margin: 40rpx 30rpx;
			background-color: #fff;
			padding: 20rpx;
		}
		.statistics{
			text-align: center;
			margin-top: 72rpx;
		}
		.complete_l{
			width: 135rpx;
			font-size: 24rpx;
			font-family: "PingFang-SC-Regular";
		}
			
		.complete_l view:first-child{
			color: rgb(238,33,45);
			font-size: 40rpx;
			// font-weight: 700;
			margin-bottom: 15rpx;
		}
		.complete_r{
			flex-wrap: wrap;
		}
		.complete_r_item{
			width: 30%;
			margin-top: 34rpx;
		}
			
		.complete_r_item view:first-child{
			font-family: "PingFang-SC-Regular";
			font-size: 26rpx;
			color: rgb(40,40,40);
		}
		.complete_r_item view:last-child{
			font-family: "PingFang-SC-Medium";
			font-size: 30rpx;
			color: rgb(40,40,40);
			margin-top: 20rpx;
		}
		
		.complete_line{
			height: 120rpx;
			border-left: 4rpx solid #eee;
			margin: 90rpx 20rpx 0 20rpx;
		}
		
		.horizontal_line{
			margin: 40rpx 40rpx ;
			border-top:  4rpx solid #eee;
		}
		.shops{
			margin-bottom: 30rpx;
			font-family: "PingFang-SC-Medium";
			font-size: 26rpx;
		}
		
		//任务完成情况
		.completed_tab{
			padding: 0rpx 60rpx;
			line-height: 70rpx;
			background-color: #fff;
			margin: 10rpx 0;
		}
		.completed_list{
			padding: 30rpx;
			margin: 30rpx;
			border-radius: 10rpx;
			background-color: #fff;
		}
		.completed_item{
			padding: 15rpx 0;
		}
		.completed_num{
			font-size: 26rpx;
			color: rgb(238,33,45);
		}
		.completed_label{
			font-size: 26rpx;
			margin-right: 10rpx;
		}
		
		.selected{
			border-bottom: 6rpx solid #f8c94e;
		}
		
	}
}
</style>
